<template>
    <div class="deviceDetail">
        <div class="boxTitle">
            <img src="@/assets/images/home/rightIcon.png" alt="">
            <span class="title">设备情况</span>
        </div>
        <div class="content">
            <div class="left">
                <div class="l_top">
                    <div class="num">920</div>
                    <div class="text">远程监控</div>
                </div>
                <div class="l_top">
                    <div class="num">492</div>
                    <div class="text">主设备</div>
                </div>
            </div>
            <div class="second">
                <div class="second_content">
                    <div class="num">1345</div>
                    <div class="text">设备总数</div>
                </div>

            </div>
            <div class="left">
                <div class="l_top">
                    <div class="num">200</div>
                    <div class="text">非远程监控</div>
                </div>
                <div class="l_top">
                    <div class="num">298</div>
                    <div class="text">附属设备</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">

</script>

<style lang="scss" scoped>
.deviceDetail {
    transition: transform 0.5s ease;
    position: absolute;
    z-index: 999;
    padding-left: vh(40);
    padding-right: vh(38);
    background: url(@/assets/images/dailyMaintenance/left1.png) no-repeat;
    background-size: 100% 100%;
    left: vw(20);
    top: vh(61);
    width: vw(422);
    height: vh(212);

    .boxTitle {
        img {
            width: vh(16);
            height: vh(14);
        }
    }

    .content {
        display: flex;
        justify-content: space-between;
        padding-top: vh(11);
        height: vh(160);

        .left {
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .l_top {
                .num {
                    display: flex;
                    align-items: center;
                    background: url(@/assets/images/dailyMaintenance/sbg.png) no-repeat;
                    background-size: 100% 100%;
                    width: vh(101);
                    height: vh(27);
                    font-family: DIN;
                    font-weight: bold;
                    font-size: vh(16);
                    color: #F4A906;
                    margin-bottom: vh(1);
                    padding-left: vh(10);
                }

                .text {
                    display: flex;
                    align-items: center;
                    background: url(@/assets/images/dailyMaintenance/sbg2.png) no-repeat;
                    background-size: 100% 100%;
                    width: vh(101);
                    height: vh(20);
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    font-size: vh(12);
                    color: #FFFFFF;
                    padding-left: vh(10);
                }
            }
        }

        .second {
            display: flex;
            align-items: center;

            .second_content {
                background: url(@/assets/images/dailyMaintenance/mbg.png) no-repeat;
                background-size: 100% 100%;
                width: vh(112);
                height: vh(99);
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                margin-right: vh(10);
                .num {
                    font-family: DIN;
                    font-weight: bold;
                    font-size: vh(20);
                    color: #F4A906;
                }
                .text {
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    font-size: vh(14);
                    color: #FFFFFF;
                }
            }
        }
    }
}
</style>